<template>
  <div>

    <el-row>
      <!-- 左边 -->
      <el-col :span="8">
        <div class="ml20 mt50 classflex-space-between">
          <div>
            <div class="text-black text-size-20" style="font-weight: 700;">课程管理</div>
          </div>
          <div>
            <el-button type="primary" @click="addCourse">创建课程</el-button>
          </div>
        </div>

        <div class="ml20 mt20">
          <!-- {{nowcourse}} -->
          <el-tabs v-model="activeName" @tab-click="tabschange">
            <el-tab-pane label="在开课程" name="在开课程"></el-tab-pane>
            <el-tab-pane label="历史课程" name="历史课程"></el-tab-pane>


          </el-tabs>
          <div v-if="activeName=='在开课程'" class="wrapper">
            <div class="   hovercolor stylecard mt10 " :class="selectedIndex1 == index ? 'changecolor':''"
              v-for="(item,index)  in courseList" :key="item.id" @click="GetMessage(1,index,item.id)">


              <div class="ml20 pd20">
                <div class="classflex-space-between">
                  <div class=" text-gray text-size-16  ">{{item.courseTeachingMode}}·{{item.courseSubject}}</div>
                  <div class="text-gray text-size-14  mt10">在读学员</div>
                </div>
                <div class="classflex-space-between mt10">
                  <div class=" text-black text-size-20    " style="font-weight: 800;"
                    :class="selectedIndex1 == index ? 'text-green':''">{{item.courseName}}</div>
                  <div class="text-black text-size-14  mt10" style="font-weight: 600;">{{item.courseNowStudent ||0}}</div>
                </div>
              </div>
            </div>


          </div>
          <div v-else-if="activeName=='历史课程'">
            <div class="   hovercolor stylecard mt10 " :class="selectedIndex2 == index ? 'changecolor':''"
              v-for="(item,index) in courseList" :key="item.id" @click="GetMessage(2,index,item.id)">


              <div class="ml20 pd20">
                <div class="classflex-space-between">
                  <div class=" text-gray text-size-16  ">{{item.courseTeachingMode}}·{{item.courseSubject}}</div>
                  <div class="text-gray text-size-14  mt10">历史学员</div>
                </div>
                <div class="classflex-space-between mt10">
                  <div class=" text-black text-size-20    " style="font-weight: 800;"
                    :class="selectedIndex2 == index ? 'text-green':''">{{item.courseName}}</div>
                  <div class="text-black text-size-14  mt10" style="font-weight: 600;">{{item.courseNowStudent ||0}}</div>
                </div>

              </div>
            </div>
          </div>
        </div>
      </el-col>
      <!-- 右边 -->
      <el-col :span="16" v-if="rightshow">
        <!-- //右上 -->
        <div class="classflex-space-between mt50 ml40">
          <div>
            <div class="">
              <div class="text-black text-size-20" style="font-weight: 800;">{{nowcourse.courseName}}</div>
            </div>

            <div class="classflex-left mt20">

              <div class="">{{nowcourse.courseState}} </div>
              <div class="ml20">·{{nowcourse.courseTeachingMode}} </div>
              <div class="ml20">·{{nowcourse.courseSubject}} </div>
              <div class="ml20">·{{nowcourse.courseAutoFinis}} </div>
              <div class="ml20 classflex-left">
                <div>自动结课</div>
                <el-switch v-model="nowcourse.courseAutoFinish" active-color="#13ce66" inactive-color="#ff4949" @change="switchChange">
                </el-switch>
              </div>
            </div>

          </div>
          <div class="mr50">
            <div v-if="nowcourse.courseState=='在开课程'">
              <el-button type="primary" @click="ChangeCourse('历史课程')">转为历史课程</el-button>
            </div>
            <div v-else>
              <el-button type="danger" @click="ChangeCourse('在开课程')">启用课程</el-button>
            </div>
          </div>


        </div>
        <!-- 右下 -->
        <div class="ml20 mt20">
          <el-tabs v-model="activeName2" @tab-click="handleClick2">
            <el-tab-pane label="在读学员" name="在读学员">
              <div v-if="orderList==null||orderList.length==0">
                <div class="classflex-center" style="flex-direction: column;">
                  <div class=" image-container  mt60 ">
                    <img :src="nocourse" alt="logo">
                  </div>

                  <div class="mt20">
                    暂无此类学员
                  </div>

                </div>

              </div>
              <div v-else class="classflex-left">
                <div  class=" itemstudent  hovercolor stylecard mt10  " :class="selectedIndex3 == index ? 'changecolor':''"
                  v-for="(item,index) in orderList" :key="item.id" @click="GetMessage(3,index,item.id)"   >

                  <div class="classflex-left  mb20 pd10 mt10 ml10" >
                    <div>
                      <img src="@/assets/touxiang.png" alt="">
                    </div>
                    <div class="ml20">
                      <div class=" text-black text-size-20  " :class="selectedIndex3 == index ? 'text-green':''">
                        {{item.orderStudentName}}
                      </div>
                      <!-- <div class="text-gray text-size-14  mt10">剩余{{item.totalClassHours}}课时</div> -->
                    </div>
                  </div>

                </div>

              </div>




            </el-tab-pane>
            <el-tab-pane label="历史学员" name="历史学员">

              <div v-if="studentList==null||studentList.length==0">
                <div class="classflex-center" style="flex-direction: column;">
                  <div class=" image-container  mt60 ">
                    <img :src="nocourse" alt="logo">
                  </div>

                  <div class="mt20">
                    暂无此类学员
                  </div>

                </div>

              </div>
              <div v-else class="   hovercolor stylecard mt10 " :class="selectedIndex4 == index ? 'changecolor':''"
                v-for="(item,index) in studentList" :key="item.id" @click="GetMessage(4,index,item.id)">

                <div class="classflex-left  mb20 pd10 mt10 ml10">
                  <div>
                    <img src="@/assets/touxiang.png" alt="">
                  </div>
                  <div class="ml20">
                    <div class=" text-black text-size-20  " :class="selectedIndex4 == index ? 'text-green':''">
                      {{item.userName}}
                    </div>
                    <div class="text-gray text-size-14  mt10">剩余{{item.totalClassHours}}课时</div>
                  </div>
                </div>

              </div>
            </el-tab-pane>



          </el-tabs>

          <div v-if="activeName=='first'">
            <div class="classflex-space-between">
              <div class="  mt20  itemright " v-for="item in list" :key="item.id">
                <!-- 框框上面 -->
                <el-card class=" ">
                  <div class="classflex-left ">
                    <div class="ml10">
                      <!-- <el-avatar :size="size" :src="circleUrl"></el-avatar> -->
                      <img src="@/assets/touxiang.png" alt="">
                    </div>
                    <div class="ml20">
                      <div>嘘嘘</div>
                      <div class="text-gray text-size-14 mt20">剩余课时</div>
                    </div>
                  </div>
                  <el-divider></el-divider>
                  <!-- 框框下面 -->
                  <div>
                    <div class="classflex-space-between mt20">
                      <div>测试班级</div>
                      <div class="text-gray text-size-14">结课</div>
                    </div>
                  </div>
                </el-card>




              </div>
            </div>
            <div>加载完毕，共计3名学员</div>


          </div>

          <div v-else-if="activeName=='second'">2</div>



        </div>



      </el-col>
    </el-row>
    <add-course-drawer class="" ref="CourseDrawer" @AddCourseDrawerSuccess="AddCourseDrawerSuccess">

    </add-course-drawer>

  </div>
</template>

<script>
  import AddCourseDrawer from '@/components/AddCourseDrawer'
  import nocourse from '@/assets/logo/nocourse.png'
  import {
    listCourse,
    getCourse,
    delCourse,
    addCourse,
    updateCourse
  } from "@/api/course/course";
  import {
    listOrder,
    getOrder,
    delOrder,
    addOrder,
    updateOrder,
    ListOrderByCourse
  } from "@/api/order/order";
  export default {
    name: "Course",
    components: {

      AddCourseDrawer,

    },
    dicts: ['course_teaching_mode', 'course_state', 'course_subject'],
    data() {
      return {
        nocourse: nocourse,
        studentList: null,
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        value: true,
        list: [{
          id: 0,
          name: "在读学员人数",
          num: "111",
        }, {
          id: 1,
          name: "历史学员人数",
          num: "111",
        }, {
          id: 2,
          name: "潜在学员人数",
          num: "111",
        }, {
          id: 3,
          name: "即将到期学员",
          num: "111",
        }, {
          id: 4,
          name: "欠费代缴学员",
          num: "111",
        }, {
          id: 5,
          name: "本月生日学员",
          num: "111",
        }],
        activeName: '在开课程',
        activeName2: '在读学员',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 课程管理表格数据
        courseList: [],
        orderList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        rightshow: false,

        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          courseId: null,
          courseName: null,
          courseSubject: null,
          courseTeachingMode: null,
          courseAutoFinish: null,
          courseState: "",
          courseNowStudent: null,
          courseOverStudent: null,
          deptId: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {},
        nowcourse: {},

        rightshow: false,
        selectedIndex1: 0,
        selectedIndex2: 2,
        selectedIndex3: 0,
        selectedIndex4: 0,
      };
    },
    created() {
      this.queryParams.courseState = "在开课程";
      this.getList();

    },
    methods: {
      switchChange(){
        console.log(this.nowcourse.courseAutoFinish);
        if(this.nowcourse.courseAutoFinish){
          this.form.id = this.nowcourse.id;
          this.form.courseAutoFinish = "true"
          updateCourse(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");

            // this.getList();
          });
        }else{
          this.form.id = this.nowcourse.id;
          this.form.courseAutoFinish = "false"
          updateCourse(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");

            // this.getList();
          });
        }

      },
      handleClick2(tab, event) {
        // console.log(tab.name);
        if (tab.name == "在读学员") {
          this.orderList = [];
          // this.queryParams.courseState = "在开课程";

          this.getOrderList();

        } else if (tab.name == "历史学员") {
          this.orderList = [];
          // this.queryParams.courseState = "历史课程";

        }

      },
      getOrderList() {

        this.queryParams.deptId = this.$store.state.user.deptId;
        this.queryParams.orderCourse = this.nowcourse.courseName;
        ListOrderByCourse(this.queryParams).then(response => {
          this.orderList = response.rows;
          console.log(this.orderList);

        });
      },

      addCourse() {
        this.$refs.CourseDrawer.open();
      },
      AddCourseDrawerSuccess() {
        this.getList();
      },
      GetMessage(type, index, id) {
        if (type == 1) {
          this.selectedIndex1 = index;
          this.rightshow = true;
          // console.log("测试：" + id);
          getCourse(parseInt(id)).then(response => {
            this.nowcourse = response.data;

             this.nowcourse.courseAutoFinish=Boolean(this.nowcourse.courseAutoFinish)


            console.log(this.nowcourse);
            this.getOrderList();

          });

        } else if (type == 2) {
          this.selectedIndex2 = index;
          this.rightshow = true;
          getCourse(parseInt(id)).then(response => {
            this.nowcourse = response.data;
            this.nowcourse.courseAutoFinish=Boolean(this.nowcourse.courseAutoFinish)
            console.log(this.nowcourse);
            this.getOrderList();

          });
        } else if (type == 3) {
          // this.selectedIndex2 = index;
        } else if (type == 4) {
          // this.selectedIndex2 = index;
        }




      },
      /** 查询课程管理列表 */
      getList() {
        this.loading = true;
        this.queryParams.deptId = this.$store.state.user.deptId;

        listCourse(this.queryParams).then(response => {
          this.courseList = response.rows;
          console.log(this.courseList);
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          courseId: null,
          courseName: null,
          courseSubject: null,
          courseTeachingMode: null,
          courseAutoFinish: null,
          courseState: null,
          courseNowStudent: null,
          courseOverStudent: null,
          deptId: null,
          delFlag: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null,
          remark: null,
          remark2: null,
          remark3: null,
          remark4: null,
          remark5: null,
          remark6: null,
          remark7: null,
          remark8: null,
          remark9: null,
          remark10: null
        };
        this.resetForm("form");
      },


      tabschange(tab, event) {
        console.log(tab.name);
        if (tab.name == "在开课程") {

          this.queryParams.courseState = "在开课程";



        } else if (tab.name == "历史课程") {

          this.queryParams.courseState = "历史课程";

        }

        this.queryParams.deptId = this.$store.state.user.deptId;
        listCourse(this.queryParams).then(response => {
          this.courseList = response.rows;

        });


      },

      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length !== 1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加课程管理";
        this.form.deptId = this.$store.state.user.deptId;

      },
      /** 修改按钮操作 */
      // handleUpdate(row) {
      //   this.reset();
      //   const id = row.id || this.ids
      //   getCourse(id).then(response => {
      //     this.form = response.data;
      //     this.open = true;
      //     this.title = "修改课程管理";
      //   });
      // },
      ChangeCourse(e) {

        this.form.id = this.nowcourse.id;
        this.form.courseState = e
        updateCourse(this.form).then(response => {
          this.$modal.msgSuccess("修改成功");

          this.getList();
        });

      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateCourse(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                // this.getList();
              });
            } else {
              addCourse(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                // this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除课程管理编号为"' + ids + '"的数据项？').then(function() {
          return delCourse(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('course/course/export', {
          ...this.queryParams
        }, `course_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
<style scoped lang="scss">
  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }

  .content {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    // height: 120px;
  }

  .contentbottom {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    // background-color: skyblue;
  }

  .classimage {
    height: 200px;
    width: 100%;
  }

  .item {
    flex: 0 0 calc((100% - 10px)/3);
    height: 100px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemright {
    flex: 0 0 calc((100% - 20px)/3);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .itemstudent {
    flex: 0 0 calc((100% - 10px)/3);
    // height: 120px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }
 .itemstudent:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }
  .itemrightboot {
    flex: 0 0 calc((100% - 20px)/2);
    height: 280px;
    // background-color: pink;
    /* 间隙为5px */
    margin: 0 5px 5px 0;
  }

  .item:nth-child(3n) {
    /* 去除第3n个的margin-right */
    margin-right: 0;
  }

  .xian {
    border-left: 2px solid #f3f6ff;
  }
</style>
